<script setup lang='ts'>
import { ref, onMounted, onUnmounted, reactive, watch } from 'vue'
import * as echarts from 'echarts'

const chartDom = ref(null)
let myChart:echarts.ECharts| null=null

// 配置项
const option:echarts.EChartsOption = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '武侠' },
        { value: 2400, name: '文学小说' },
        { value: 1986, name: '科技' },
        { value: 1789, name: '生活娱乐' },
        { value: 2637, name: '专业文献' }
      ]
    }
  ]
}

// 挂载时初始化图表
onMounted(()=>{
    if(chartDom.value){
        myChart = echarts.init(chartDom.value)
        myChart.setOption(option)
    }
})

// 卸载组件时卸载图表
onUnmounted(()=>{
    myChart?.dispose()
})

</script>

<template>
    <div ref="chartDom" class="w-full h-52">
    </div>
</template>
<style scoped>

</style>